import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_base/05_Gridview/listData.dart';

/// 主要学习Card
///

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Card 功能介绍'),
      ),
      body: const MyCard(),
    ),
  ));
}

class MyAspect extends StatelessWidget {
  const MyAspect({super.key});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 2 / 1, //固定的宽高比
      child: Container(
        width: 200, // 设置宽高并无效果
        color: Colors.red,
      ),
    );
  }
}

/// card
///

class MyCard extends StatefulWidget {
  const MyCard({super.key});

  @override
  State<MyCard> createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initdata(),
    );
  }

  List<Widget> _initdata() {
    var list = listData.map((value) {
      return Card(
        clipBehavior: Clip.antiAlias, // 裁剪边角，如果有内容突出
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        elevation: 20,
        shadowColor: Colors.blue,
        margin: const EdgeInsets.all(10),
        child: Column(
          children: [
            // AspectRatio(
            //   aspectRatio: 1 / 1,
            Image.network(
              value['imageUrl'],
              fit: BoxFit.fill,
              height: 180,
              // width: 180,
              width: double.infinity,
            ),
            // ),
            ListTile(
              title: Text(value['title']),
              subtitle: Text(value['author']),
              leading: CircleAvatar(
                radius: 20,
                backgroundImage: NetworkImage(value['imageUrl']),
              ),
            )
          ],
        ),
      );
    });
    return list.toList();
  }
}
